@import "vars";


// Mixin for icon default formatting
.jw-icon {
    font-family: 'jw-icons';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    //line-height: 1;
    text-transform: none;
    background-color: transparent;
    font-variant: normal;

    /* Enable Ligatures ================ */
    -webkit-font-feature-settings: "liga";
    -moz-font-feature-settings: "liga=1";
    -moz-font-feature-settings: "liga";
    -ms-font-feature-settings: "liga" 1;
    -o-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -moz-osx-font-smoothing: grayscale;
}

.inset-controlbar() {
    .jw-controlbar {
        // for correct display in IE browsers
        display: inline-block;
        // width assignment is required for IE11 to center correctly
        width: 96%;
        max-width: 50em;
        margin: 0 auto;
        bottom: .7em;
        left: 2%;
        right: 2%;
    }
    &.jw-flag-audio-player .jw-controlbar {
        bottom: 0; // overwrite the inset-controlbar mixin
    }
    &.jw-breakpoint-0 .jw-controlbar {
        border-radius: 0;
        bottom: 0;
        left: 0;
        padding: 0 0.3em;
        right: 0;
        width: 100%;
    }
}

.vertically-centered-rail-element(@rail-height, @element-height) {
    top: (@rail-height - @element-height)/2;
}

.horizontally-centered-rail-element(@rail-width, @element-width) {
    left: (@rail-width - @element-width)/2;
}

.hover(@color:@hover-color) {
    &:hover {
        color: @color;
    }
}

.skin-element-padding() {
    .jw-icon-inline,
    .jw-icon-tooltip,
    .jw-text-elapsed,
    .jw-text-duration {
        padding: 0 @ui-padding;
    }
}

// Less requires namespaced variables/mixins to overwrite globals - https://github.com/less/less.js/issues/1316

/* Mixin for common skin styles with variable colors */
#namespace() {
    .basic-skin-styles() {
        .jw-background-color {
            background: @display-bkgd-color;
        }

        .jw-controlbar {
            background: @controlbar-background;
        }

        .jw-text {
            color: @inactive-color;
        }

        /* Text color in thumbnail that appears upon hovering on the timeline slider */
        .jw-tooltip-title {
            color: @inactive-color;
            border-bottom: 1px solid @inactive-color;
        }

        .jw-knob {
            color: @inactive-color;
        }

        .jw-button-color {
            color: @inactive-color;
            .hover(@hover-color);
            &:focus {
                outline: none;
                color: @hover-color;
            }
        }

        .jw-toggle {
            color: @hover-color;
            &.jw-off {
                color: @inactive-color;
            }
            &:focus {
                outline: none;
            }
        }

        /* Color for list item text in menu lists */
        .jw-option {
            color: @inactive-color;
            &.jw-active-option {
                color: @hover-color;
            }
        }

        /* Colors for center play and buffering icons */
        .jw-icon-display {
            color: @display-icon-color;
        }

        .jw-display-icon-container {
            border-radius: @ui-corner-round;

            &:hover {
                background: @display-bkgd-hover-color;

                .jw-icon-display {
                    color: @display-icon-hover-color;
                }
            }
        }

        /* Slider colors */

        .jw-rail {
            background: @rail-color;
        }

        .jw-buffer {
            background: @buffer-color;
        }

        .jw-progress {
            background: @progress-color;
        }

        .jw-slider-horizontal {
            background: @controlbar-background;
            height: @rail-height;

            .jw-rail,
            .jw-buffer,
            .jw-progress {
                height: @rail-height;
            }

            .jw-knob {
                margin-left: @thumb-size/-2;
            }
        }

        .jw-slider-vertical {
            .jw-knob {
                margin-bottom: @thumb-size/-2;
            }

            .jw-slider-container,
            .jw-rail,
            .jw-progress {
                width: @def-rail-width;
            }
        }

        /* Styles for menu elements, volume, slider thumbnail */
        .jw-time-tip,
        .jw-volume-tip,
        .jw-menu {
            background: @volume-background;
            border: @volume-border;
            padding: @volume-padding;
        }

        .jw-skip {
            background: @controlbar-background;
            padding: @ui-padding;

            .jw-skip-icon {
                color: @inactive-color;
            }

            &.jw-skippable:hover .jw-skip-icon,
            &.jw-skippable:hover .jw-text {
                color: @active-color;
            }
        }

        .jw-time-tip,
        .jw-dock-button {
            .jw-text {
                color: #bbb;
            }
        }

        /* Dock button styles */
        .jw-dock-button {
            background: @display-bkgd-color;
            border-radius: @ui-corner-round;

            &:hover {
                background: @display-bkgd-hover-color;
            }
        }

        /* Next up display */
        .jw-nextup-container {
          bottom: @nextup-position-bottom;
          right: @nextup-position-right;
        }

        .jw-nextup {
          border-radius: @nextup-border-radius;
        }

        .jw-nextup-header {
          background: @nextup-header-background;
          color: @nextup-header-text-color;
        }

        .jw-nextup-body {
          background: @nextup-body-background;
          color: @nextup-body-text-color;
        }

        .jw-nextup-thumbnail-visible + .jw-nextup-title::after {
          background: linear-gradient(
            -180deg,
            fade(@nextup-body-text-color-overflow, 0%) 0%,
            @nextup-body-text-color-overflow 100%
          );
        }

        .jw-nextup-close {
          color: @nextup-close-button-color-inactive;
        }

        .jw-nextup-close:active {
          color: @nextup-close-button-color-active;
        }

        .jw-nextup-close:hover {
          color: @nextup-close-button-color-hover;
        }

    }

    /* Override default touch flag styles */
    .touch-flag-skin-styles() {
        &.jw-flag-touch {
            &.jw-breakpoint-7,
            &.jw-breakpoint-6,
            &.jw-breakpoint-5,
            &.jw-breakpoint-4 {
                .jw-nextup-container {
                    bottom: @nextup-position-bottom-touch;
                }
            }
        }
    }

    .controlbar-height() {
        .jw-controlbar {
            height: @controlbar-height;
        }

        .jw-time-tip {
            bottom: (@controlbar-height / 2);
        }

        .jw-controlbar {
            .jw-overlay {
                bottom: @controlbar-height;
            }
        }

        .jw-captions {
            max-height: calc(97% - 6.25 * (@controlbar-height));
        }

        .jwplayer {
            video::-webkit-media-text-track-container {
                max-height: calc(97% - 6.25 * (@controlbar-height));
            }
        }

        .jw-controls {
            .jw-controls-right {
                bottom: @controlbar-height;
            }
        }
        .jw-icon-inline,
        .jw-icon-tooltip,
        .jw-text-elapsed,
        .jw-text-duration {
            height: @controlbar-height;
            line-height: @controlbar-height;
        }

        .jw-icon-inline,
        .jw-icon-tooltip {
            min-width: @controlbar-height * 5/8;
        }
    }
    // Set color classes in the skin so they can be reused in other parts of the player (i.e. the related overlay)
    .set-global-color-classes() {
        .jw-color-active {
            color: @active-color;
            stroke: @active-color;
            border-color: @active-color;
        }

        .jw-color-active-hover {
            &:hover {
                color: @active-color;
                stroke: @active-color;
                border-color: @active-color;
            }
        }

        .jw-color-inactive {
            color: @inactive-color;
            stroke: @inactive-color;
            border-color: @inactive-color;
        }

        .jw-color-inactive-hover {
            &:hover {
                color: @inactive-color;
                stroke: @inactive-color;
                border-color: @inactive-color;
            }
        }
    }
}
